summaryrefslogtreecommitdiff
path: root/app/[lng]/evcp
diff options
context:
space:
mode:
Diffstat (limited to 'app/[lng]/evcp')
-rw-r--r--app/[lng]/evcp/data-room/[projectId]/members/page.tsx705
1 files changed, 440 insertions, 265 deletions
diff --git a/app/[lng]/evcp/data-room/[projectId]/members/page.tsx b/app/[lng]/evcp/data-room/[projectId]/members/page.tsx
index dbd5e37d..244d957b 100644
--- a/app/[lng]/evcp/data-room/[projectId]/members/page.tsx
+++ b/app/[lng]/evcp/data-room/[projectId]/members/page.tsx
@@ -17,7 +17,8 @@ import {
Check,
ChevronsUpDown,
Loader2,
- UserCog
+ UserCog,
+ Send
} from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
@@ -68,6 +69,8 @@ import {
import { Separator } from '@/components/ui/separator';
import { getUsersForFilter } from '@/lib/gtc-contract/service';
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Checkbox } from '@/components/ui/checkbox';
+import { sendDataRoomInvitation, sendBulkDataRoomInvitations } from '@/components/project/dataroom-members';
interface Member {
id: string;
@@ -105,6 +108,14 @@ export default function ProjectMembersPage({
const [roleFilter, setRoleFilter] = useState<string>('all');
const [addMemberOpen, setAddMemberOpen] = useState(false);
const [editingMember, setEditingMember] = useState<Member | null>(null);
+
+ // 프로젝트 정보 상태 추가
+ const [projectName, setProjectName] = useState<string>('Data Room');
+
+ // 이메일 전송 관련 상태
+ const [sendEmailOnAdd, setSendEmailOnAdd] = useState(true);
+ const [selectedMembers, setSelectedMembers] = useState<Set<string>>(new Set());
+ const [sendingEmail, setSendingEmail] = useState(false);
// 사용자 선택 관련 상태
const [availableUsers, setAvailableUsers] = useState<User[]>([]);
@@ -133,8 +144,22 @@ export default function ProjectMembersPage({
useEffect(() => {
fetchMembers();
checkUserRole();
+ fetchProjectInfo();
}, [projectId]);
+ // 프로젝트 정보 가져오기
+ const fetchProjectInfo = async () => {
+ try {
+ const response = await fetch(`/api/projects/${projectId}`);
+ const data = await response.json();
+ if (data.name) {
+ setProjectName(data.name);
+ }
+ } catch (error) {
+ console.error('프로젝트 정보 로드 실패:', error);
+ }
+ };
+
// 다이얼로그가 열릴 때 사용자 목록 가져오기
useEffect(() => {
if (addMemberOpen) {
@@ -145,6 +170,7 @@ export default function ProjectMembersPage({
setUserSearchTerm('');
setNewMemberRole('viewer');
setIsExternalUser(false);
+ setSendEmailOnAdd(true);
}
}, [addMemberOpen]);
@@ -217,10 +243,34 @@ export default function ProjectMembersPage({
if (!response.ok) throw new Error('멤버 추가 실패');
- toast({
- title: '성공',
- description: '새 멤버가 추가되었습니다.',
- });
+ // 이메일 전송 옵션이 켜져 있으면 이메일 발송
+ if (sendEmailOnAdd) {
+ const emailResult = await sendDataRoomInvitation({
+ email: selectedUser.email,
+ name: selectedUser.name,
+ dataRoomName: projectName,
+ role: newMemberRole,
+ dataRoomUrl: `${window.location.origin}/projects/${projectId}`
+ });
+
+ if (emailResult.success) {
+ toast({
+ title: '성공',
+ description: '멤버가 추가되고 초대 이메일이 발송되었습니다.',
+ });
+ } else {
+ toast({
+ title: '부분 성공',
+ description: '멤버는 추가되었지만 이메일 발송에 실패했습니다.',
+ variant: 'default',
+ });
+ }
+ } else {
+ toast({
+ title: '성공',
+ description: '새 멤버가 추가되었습니다.',
+ });
+ }
setAddMemberOpen(false);
fetchMembers();
@@ -233,6 +283,56 @@ export default function ProjectMembersPage({
}
};
+ // 선택된 멤버들에게 이메일 보내기
+ const sendEmailToSelectedMembers = async () => {
+ if (selectedMembers.size === 0) {
+ toast({
+ title: '오류',
+ description: '이메일을 보낼 멤버를 선택해주세요.',
+ variant: 'destructive',
+ });
+ return;
+ }
+
+ setSendingEmail(true);
+
+ try {
+ const membersToEmail = members
+ .filter(m => selectedMembers.has(m.id))
+ .map(m => ({
+ email: m.user.email,
+ name: m.user.name,
+ dataRoomName: projectName,
+ role: m.role,
+ dataRoomUrl: `${window.location.origin}/projects/${projectId}`
+ }));
+
+ const result = await sendBulkDataRoomInvitations(membersToEmail);
+
+ if (result.success) {
+ toast({
+ title: '성공',
+ description: result.message,
+ });
+ setSelectedMembers(new Set());
+ } else {
+ toast({
+ title: '오류',
+ description: result.message,
+ variant: 'destructive',
+ });
+ }
+ } catch (error) {
+ toast({
+ title: '오류',
+ description: '이메일 발송에 실패했습니다.',
+ variant: 'destructive',
+ });
+ } finally {
+ setSendingEmail(false);
+ }
+ };
+
const updateMemberRole = async (memberId: string, newRole: string) => {
try {
const response = await fetch(`/api/projects/${projectId}/members/${memberId}`, {
@@ -241,24 +341,26 @@ export default function ProjectMembersPage({
body: JSON.stringify({ role: newRole }),
});
- if (!response.ok) throw new Error('역할 변경 실패');
+ if (!response.ok) throw new Error('역할 수정 실패');
toast({
title: '성공',
- description: '멤버 역할이 변경되었습니다.',
+ description: '멤버 역할이 수정되었습니다.',
});
-
fetchMembers();
+ setEditingMember(null);
} catch (error) {
toast({
title: '오류',
- description: '역할 변경에 실패했습니다.',
+ description: '역할 수정에 실패했습니다.',
variant: 'destructive',
});
}
};
const removeMember = async (memberId: string) => {
+ if (!confirm('정말로 이 멤버를 제거하시겠습니까?')) return;
+
try {
const response = await fetch(`/api/projects/${projectId}/members/${memberId}`, {
method: 'DELETE',
@@ -270,7 +372,6 @@ export default function ProjectMembersPage({
title: '성공',
description: '멤버가 제거되었습니다.',
});
-
fetchMembers();
} catch (error) {
toast({
@@ -281,208 +382,230 @@ export default function ProjectMembersPage({
}
};
- const handleSelectUser = (user: User) => {
- setSelectedUser(user);
- setUserPopoverOpen(false);
-
- // 외부 사용자(partners)인 경우 역할을 viewer로 고정
- if (user.domain === 'partners') {
- setIsExternalUser(true);
- setNewMemberRole('viewer');
- } else {
- setIsExternalUser(false);
- // 내부 사용자는 기본값 viewer로 설정하되 변경 가능
- setNewMemberRole('viewer');
+ // 개별 멤버에게 이메일 보내기
+ const sendEmailToMember = async (member: Member) => {
+ setSendingEmail(true);
+
+ try {
+ const result = await sendDataRoomInvitation({
+ email: member.user.email,
+ name: member.user.name,
+ dataRoomName: projectName,
+ role: member.role,
+ dataRoomUrl: `${window.location.origin}/projects/${projectId}`
+ });
+
+ if (result.success) {
+ toast({
+ title: '성공',
+ description: '초대 이메일이 발송되었습니다.',
+ });
+ } else {
+ toast({
+ title: '오류',
+ description: '이메일 발송에 실패했습니다.',
+ variant: 'destructive',
+ });
+ }
+ } catch (error) {
+ toast({
+ title: '오류',
+ description: '이메일 발송에 실패했습니다.',
+ variant: 'destructive',
+ });
+ } finally {
+ setSendingEmail(false);
}
};
- const formatDateShort = (iso?: string) =>
- iso ? new Date(iso).toLocaleDateString() : '-';
-
- const roleConfig = {
- owner: { label: 'Owner', icon: Crown, color: 'text-yellow-500', bg: 'bg-yellow-50' },
- admin: { label: 'Admin', icon: Shield, color: 'text-blue-500', bg: 'bg-blue-50' },
- editor: { label: 'Editor', icon: Edit2, color: 'text-green-500', bg: 'bg-green-50' },
- viewer: { label: 'Viewer', icon: Eye, color: 'text-gray-500', bg: 'bg-gray-50' },
+ const getRoleBadge = (role: string) => {
+ const config = {
+ owner: { icon: Crown, label: 'Owner', variant: 'default' as const, className: 'bg-purple-100 text-purple-800' },
+ admin: { icon: Shield, label: 'Admin', variant: 'secondary' as const, className: 'bg-blue-100 text-blue-800' },
+ editor: { icon: Edit2, label: 'Editor', variant: 'outline' as const, className: 'bg-green-100 text-green-800' },
+ viewer: { icon: Eye, label: 'Viewer', variant: 'outline' as const, className: '' }
+ };
+ const { icon: Icon, label, variant, className } = config[role] || config.viewer;
+ return (
+ <Badge variant={variant} className={cn('flex items-center gap-1', className)}>
+ <Icon className="h-3 w-3" />
+ {label}
+ </Badge>
+ );
};
- const filteredMembers = members.filter(member => {
- const matchesSearch = member.user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
- member.user.email.toLowerCase().includes(searchQuery.toLowerCase());
- const matchesRole = roleFilter === 'all' || member.role === roleFilter;
- return matchesSearch && matchesRole;
+ const filteredMembers = members
+ .filter(m => {
+ if (roleFilter !== 'all' && m.role !== roleFilter) return false;
+ if (!searchQuery) return true;
+ const query = searchQuery.toLowerCase();
+ return m.user.name.toLowerCase().includes(query) ||
+ m.user.email.toLowerCase().includes(query);
+ });
+
+ const displayedMembers = filteredMembers.slice((page - 1) * pageSize, page * pageSize);
+ const totalPages = Math.ceil(filteredMembers.length / pageSize);
+
+ const canManageMembers = ['owner', 'admin'].includes(currentUserRole);
+
+ // 사용자 필터링 로직
+ const filteredUsers = availableUsers.filter(user => {
+ const searchLower = userSearchTerm.toLowerCase();
+ return user.name.toLowerCase().includes(searchLower) ||
+ user.email.toLowerCase().includes(searchLower);
});
- // 사용자 검색 필터링
- const filteredUsers = availableUsers.filter(user =>
- user.name.toLowerCase().includes(userSearchTerm.toLowerCase()) ||
- user.email.toLowerCase().includes(userSearchTerm.toLowerCase())
- );
-
-
- const canManageMembers = currentUserRole === 'owner' || currentUserRole === 'admin';
-
- const totalPages = Math.max(1, Math.ceil(filteredMembers.length / pageSize));
- const paginatedMembers = filteredMembers.slice((page - 1) * pageSize, page * pageSize);
+ // 전체 선택/해제
+ const toggleSelectAll = () => {
+ if (selectedMembers.size === displayedMembers.length) {
+ setSelectedMembers(new Set());
+ } else {
+ setSelectedMembers(new Set(displayedMembers.map(m => m.id)));
+ }
+ };
if (loading) {
return (
- <div className="flex items-center justify-center min-h-[400px]">
- <div className="text-center space-y-3">
- <Loader2 className="h-8 w-8 animate-spin text-primary mx-auto" />
- <p className="text-sm text-muted-foreground">멤버 목록을 불러오는 중...</p>
- </div>
+ <div className="flex items-center justify-center h-96">
+ <Loader2 className="h-8 w-8 animate-spin" />
</div>
);
}
return (
- <div className="p-6 space-y-6">
- {/* 헤더 */}
- <div className="flex items-center justify-between">
- <div>
- <h1 className="text-2xl font-bold">프로젝트 멤버</h1>
- <p className="text-muted-foreground mt-1">
- 프로젝트에 참여 중인 멤버를 관리합니다
- </p>
- </div>
-
- {canManageMembers && (
- <Button onClick={() => setAddMemberOpen(true)}>
- <UserPlus className="h-4 w-4 mr-2" />
- 멤버 추가
- </Button>
- )}
- </div>
-
- {/* 필터 */}
- <div className="flex items-center gap-3">
- <div className="relative flex-1 max-w-md">
- <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
- <Input
- placeholder="이름 또는 이메일로 검색..."
- className="pl-9"
- value={searchQuery}
- onChange={(e) => setSearchQuery(e.target.value)}
- />
- </div>
-
- <Select value={roleFilter} onValueChange={setRoleFilter}>
- <SelectTrigger className="w-40">
- <SelectValue />
- </SelectTrigger>
- <SelectContent>
- <SelectItem value="all">모든 역할</SelectItem>
- <SelectItem value="owner">Owner</SelectItem>
- <SelectItem value="admin">Admin</SelectItem>
- <SelectItem value="editor">Editor</SelectItem>
- <SelectItem value="viewer">Viewer</SelectItem>
- </SelectContent>
- </Select>
- </div>
-
- {/* 멤버 목록 (Table) */}
- <div className="overflow-x-auto">
- <Table className="[&_td]:py-2 [&_th]:py-2 text-sm">
- <TableHeader className="sticky top-0 bg-background z-10">
- <TableRow>
- <TableHead className="w-[44px]"></TableHead>
- <TableHead className="w-[100px]">이름</TableHead>
- <TableHead className="min-w-[150px]">이메일</TableHead>
- <TableHead className="w-[90px] text-center">구분</TableHead>
- <TableHead className="w-[140px]">역할</TableHead>
- <TableHead className="w-[130px]">추가일</TableHead>
- <TableHead className="w-[150px]">마지막 접속</TableHead>
- <TableHead className="w-[60px] text-right">액션</TableHead>
- </TableRow>
- </TableHeader>
-
- <TableBody>
- {paginatedMembers.length > 0 ? (
- paginatedMembers.map((member) => {
- const config = roleConfig[member.role];
- const Icon = config.icon;
- const isInternal = member.user.domain !== 'partners';
-
- return (
- <TableRow key={member.id} className="hover:bg-accent/40">
- {/* Avatar */}
- <TableCell className="align-middle">
- <Avatar className="h-8 w-8">
- <AvatarImage src={member.user.imageUrl} />
- <AvatarFallback>
- {member.user.name?.charAt(0).toUpperCase()}
- </AvatarFallback>
- </Avatar>
- </TableCell>
-
- {/* Name */}
- <TableCell className="align-middle">
- <span className="font-medium">{member.user.name}</span>
- </TableCell>
-
- {/* Email */}
- <TableCell className="align-middle">
- <span className="text-muted-foreground">{member.user.email}</span>
- </TableCell>
-
- {/* Domain */}
- <TableCell className="align-middle text-center">
- <Badge variant={isInternal ? 'secondary' : 'outline'}>
- {isInternal ? 'Internal' : 'Partner'}
- </Badge>
- </TableCell>
-
- {/* Role */}
- <TableCell className="align-middle">
- {canManageMembers && member.role !== 'owner' && member.user.domain !== 'partners' ? (
- <Select
- value={member.role}
- onValueChange={(v) => updateMemberRole(member.id, v)}
- >
- <SelectTrigger className="h-8 w-[120px]">
- <div className={cn('flex items-center gap-1')}>
- <Icon className={cn('h-3 w-3', config.color)} />
- <span className={cn('text-xs font-medium')}>
- {config.label}
- </span>
- </div>
- </SelectTrigger>
- <SelectContent>
- <SelectItem value="viewer">Viewer</SelectItem>
- <SelectItem value="editor">Editor</SelectItem>
- <SelectItem value="admin">Admin</SelectItem>
- </SelectContent>
- </Select>
- ) : (
- <div className="inline-flex items-center gap-2">
- <div className={cn('px-2 py-1 rounded-full inline-flex items-center gap-1', config.bg)}>
- <Icon className={cn('h-3 w-3', config.color)} />
- <span className={cn('text-xs font-medium', config.color)}>
- {config.label}
- </span>
+ <div className="container mx-auto py-8">
+ <Card>
+ <CardHeader>
+ <div className="flex items-center justify-between">
+ <div>
+ <CardTitle className="flex items-center gap-2">
+ <Users className="h-5 w-5" />
+ 프로젝트 멤버
+ </CardTitle>
+ <CardDescription>
+ 프로젝트에 참여 중인 멤버를 관리합니다 ({filteredMembers.length}명)
+ </CardDescription>
+ </div>
+ <div className="flex gap-2">
+ {selectedMembers.size > 0 && (
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={sendEmailToSelectedMembers}
+ disabled={sendingEmail}
+ >
+ {sendingEmail ? (
+ <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+ ) : (
+ <Send className="h-4 w-4 mr-2" />
+ )}
+ 선택한 멤버에게 이메일 ({selectedMembers.size})
+ </Button>
+ )}
+ {canManageMembers && (
+ <Button
+ onClick={() => setAddMemberOpen(true)}
+ size="sm"
+ >
+ <UserPlus className="h-4 w-4 mr-2" />
+ 멤버 추가
+ </Button>
+ )}
+ </div>
+ </div>
+ </CardHeader>
+ <CardContent>
+ <div className="space-y-4">
+ {/* 필터 영역 */}
+ <div className="flex items-center gap-4">
+ <div className="flex-1">
+ <div className="relative">
+ <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+ <Input
+ placeholder="이름 또는 이메일로 검색..."
+ value={searchQuery}
+ onChange={(e) => setSearchQuery(e.target.value)}
+ className="pl-9"
+ />
+ </div>
+ </div>
+ <Select value={roleFilter} onValueChange={setRoleFilter}>
+ <SelectTrigger className="w-[150px]">
+ <Filter className="h-4 w-4 mr-2" />
+ <SelectValue />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectItem value="all">모든 역할</SelectItem>
+ <SelectItem value="owner">Owner</SelectItem>
+ <SelectItem value="admin">Admin</SelectItem>
+ <SelectItem value="editor">Editor</SelectItem>
+ <SelectItem value="viewer">Viewer</SelectItem>
+ </SelectContent>
+ </Select>
+ </div>
+
+ <Separator />
+
+ {/* 멤버 테이블 */}
+ <div className="rounded-md border">
+ <Table>
+ <TableHeader>
+ <TableRow>
+ <TableHead className="w-[50px]">
+ <Checkbox
+ checked={selectedMembers.size === displayedMembers.length && displayedMembers.length > 0}
+ onCheckedChange={toggleSelectAll}
+ />
+ </TableHead>
+ <TableHead>멤버</TableHead>
+ <TableHead>역할</TableHead>
+ <TableHead>추가일</TableHead>
+ {/* <TableHead>마지막 접속</TableHead> */}
+ {canManageMembers && <TableHead className="w-[100px]">작업</TableHead>}
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {displayedMembers.map((member) => (
+ <TableRow key={member.id}>
+ <TableCell>
+ <Checkbox
+ checked={selectedMembers.has(member.id)}
+ onCheckedChange={(checked) => {
+ const newSelected = new Set(selectedMembers);
+ if (checked) {
+ newSelected.add(member.id);
+ } else {
+ newSelected.delete(member.id);
+ }
+ setSelectedMembers(newSelected);
+ }}
+ />
+ </TableCell>
+ <TableCell>
+ <div className="flex items-center gap-3">
+ <Avatar className="h-8 w-8">
+ <AvatarImage src={member.user.imageUrl} />
+ <AvatarFallback>
+ {member.user.name.split(' ').map(n => n[0]).join('').toUpperCase()}
+ </AvatarFallback>
+ </Avatar>
+ <div>
+ <div className="font-medium">{member.user.name}</div>
+ <div className="text-sm text-muted-foreground">{member.user.email}</div>
</div>
- {member.user.domain === 'partners' && canManageMembers && member.role !== 'owner' && (
- <span className="text-xs text-muted-foreground">(고정)</span>
- )}
</div>
- )}
- </TableCell>
-
- {/* AddedAt */}
- <TableCell className="align-middle">
- {formatDateShort(member.addedAt)}
- </TableCell>
-
- {/* LastAccess */}
- <TableCell className="align-middle">
- {formatDateShort(member.lastAccess)}
- </TableCell>
-
- {/* Actions */}
- <TableCell className="align-middle">
- <div className="flex justify-end">
- {canManageMembers && member.role !== 'owner' ? (
+ </TableCell>
+ <TableCell>{getRoleBadge(member.role)}</TableCell>
+ <TableCell className="text-sm text-muted-foreground">
+ {new Date(member.addedAt).toLocaleDateString()}
+ </TableCell>
+ {/* <TableCell className="text-sm text-muted-foreground">
+ {member.lastAccess
+ ? new Date(member.lastAccess).toLocaleDateString()
+ : '접속 기록 없음'}
+ </TableCell> */}
+ {canManageMembers && (
+ <TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
@@ -490,95 +613,131 @@ export default function ProjectMembersPage({
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
- <DropdownMenuItem>
- <Mail className="h-4 w-4 mr-2" />
- 메일 보내기
- </DropdownMenuItem>
- <DropdownMenuSeparator />
- <DropdownMenuItem
- className="text-red-600"
- onClick={() => removeMember(member.id)}
+ <DropdownMenuItem
+ onClick={() => sendEmailToMember(member)}
+ disabled={sendingEmail}
>
- <Trash2 className="h-4 w-4 mr-2" />
- 제거
+ <Mail className="h-4 w-4 mr-2" />
+ 이메일 보내기
</DropdownMenuItem>
+ {member.role !== 'owner' && (
+ <>
+ <DropdownMenuItem onClick={() => setEditingMember(member)}>
+ <UserCog className="h-4 w-4 mr-2" />
+ 역할 변경
+ </DropdownMenuItem>
+ <DropdownMenuSeparator />
+ <DropdownMenuItem
+ onClick={() => removeMember(member.id)}
+ className="text-red-600"
+ >
+ <Trash2 className="h-4 w-4 mr-2" />
+ 멤버 제거
+ </DropdownMenuItem>
+ </>
+ )}
</DropdownMenuContent>
</DropdownMenu>
- ) : (
- <Button variant="ghost" size="icon" disabled>
- <MoreVertical className="h-4 w-4" />
- </Button>
- )}
- </div>
- </TableCell>
- </TableRow>
- );
- })
- ) : (
- <TableRow>
- <TableCell colSpan={8} className="h-32 text-center text-muted-foreground">
- <div className="flex flex-col items-center justify-center gap-2">
- <Users className="h-8 w-8 text-muted-foreground/60" />
- <span>검색 결과가 없습니다</span>
- </div>
- </TableCell>
- </TableRow>
+ </TableCell>
+ )}
+ </TableRow>
+ ))}
+ {displayedMembers.length === 0 && (
+ <TableRow>
+ <TableCell colSpan={canManageMembers ? 6 : 5} className="text-center py-8">
+ <div className="text-muted-foreground">
+ {searchQuery || roleFilter !== 'all'
+ ? '검색 결과가 없습니다.'
+ : '아직 멤버가 없습니다.'}
+ </div>
+ </TableCell>
+ </TableRow>
+ )}
+ </TableBody>
+ </Table>
+ </div>
+
+ {/* 페이지네이션 */}
+ {totalPages > 1 && (
+ <div className="flex items-center justify-between">
+ <p className="text-sm text-muted-foreground">
+ 전체 {filteredMembers.length}명 중 {(page - 1) * pageSize + 1}-
+ {Math.min(page * pageSize, filteredMembers.length)}명 표시
+ </p>
+ <div className="flex items-center gap-2">
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={() => setPage(p => Math.max(1, p - 1))}
+ disabled={page === 1}
+ >
+ 이전
+ </Button>
+ <span className="text-sm">
+ {page} / {totalPages}
+ </span>
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+ disabled={page === totalPages}
+ >
+ 다음
+ </Button>
+ </div>
+ </div>
)}
- </TableBody>
- </Table>
- </div>
+ </div>
+ </CardContent>
+ </Card>
- {/* Pagination */}
- <div className="flex items-center justify-between px-4 py-3 border-t">
- <div className="text-sm text-muted-foreground">
- 총 {filteredMembers.length}명 · {pageSize}명/페이지
- </div>
- <div className="flex items-center gap-2">
- <Button
- variant="outline"
- size="sm"
- onClick={() => setPage((p) => Math.max(1, p - 1))}
- disabled={page === 1}
- >
- 이전
- </Button>
- <span className="text-sm">
- {page} / {totalPages}
- </span>
- <Button
- variant="outline"
- size="sm"
- onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
- disabled={page === totalPages}
- >
- 다음
- </Button>
- </div>
- </div>
+ {/* 역할 변경 다이얼로그 */}
+ <Dialog open={!!editingMember} onOpenChange={(open) => !open && setEditingMember(null)}>
+ <DialogContent>
+ <DialogHeader>
+ <DialogTitle>역할 변경</DialogTitle>
+ <DialogDescription>
+ {editingMember?.user.name}님의 역할을 변경합니다.
+ </DialogDescription>
+ </DialogHeader>
+ <div className="space-y-4">
+ <Select
+ value={editingMember?.role}
+ onValueChange={(value) => editingMember && updateMemberRole(editingMember.id, value)}
+ >
+ <SelectTrigger>
+ <SelectValue />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectItem value="viewer">Viewer - 읽기 전용</SelectItem>
+ <SelectItem value="editor">Editor - 파일 편집 가능</SelectItem>
+ <SelectItem value="admin">Admin - 프로젝트 관리</SelectItem>
+ </SelectContent>
+ </Select>
+ </div>
+ </DialogContent>
+ </Dialog>
{/* 멤버 추가 다이얼로그 */}
<Dialog open={addMemberOpen} onOpenChange={setAddMemberOpen}>
- <DialogContent className="max-w-lg">
+ <DialogContent className="sm:max-w-[500px]">
<DialogHeader>
- <DialogTitle>멤버 추가</DialogTitle>
+ <DialogTitle>새 멤버 추가</DialogTitle>
<DialogDescription>
- 프로젝트에 멤버를 추가합니다
+ 프로젝트에 새 멤버를 추가합니다. 사용자 유형에 따라 부여 가능한 권한이 다릅니다.
</DialogDescription>
</DialogHeader>
<Tabs defaultValue="internal" className="w-full">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="internal">내부 사용자</TabsTrigger>
- <TabsTrigger value="external" className="flex items-center gap-2">
- 외부 사용자
- <Badge variant="outline" className="ml-1 text-xs">Viewer 전용</Badge>
- </TabsTrigger>
+ <TabsTrigger value="external">외부 사용자 (파트너)</TabsTrigger>
</TabsList>
<TabsContent value="internal" className="space-y-4 mt-4">
<div className="space-y-2">
<Label htmlFor="internal-user">사용자 선택</Label>
-
+
{loadingUsers ? (
<div className="flex items-center justify-center py-4">
<Loader2 className="h-4 w-4 animate-spin" />
@@ -595,8 +754,8 @@ export default function ProjectMembersPage({
className="w-full justify-between"
>
<span className="truncate">
- {selectedUser && selectedUser.domain !== 'partners' ? (
- <div className="text-left">
+ {selectedUser && !isExternalUser ? (
+ <div className="flex items-center gap-2">
<div className="font-medium">{selectedUser.name}</div>
<div className="text-xs text-muted-foreground">{selectedUser.email}</div>
</div>
@@ -739,7 +898,7 @@ export default function ProjectMembersPage({
<CommandEmpty>파트너를 찾을 수 없습니다.</CommandEmpty>
<CommandGroup heading="파트너 목록">
{filteredUsers
- .filter(u => u.ownerCompanyId !== null)
+ .filter(u => u.domain === 'partners')
.map((user) => (
<CommandItem
key={user.id}
@@ -787,6 +946,21 @@ export default function ProjectMembersPage({
</TabsContent>
</Tabs>
+ {/* 이메일 전송 옵션 */}
+ <div className="flex items-center space-x-2 pt-4 border-t">
+ <Checkbox
+ id="send-email"
+ checked={sendEmailOnAdd}
+ onCheckedChange={(checked) => setSendEmailOnAdd(checked as boolean)}
+ />
+ <label
+ htmlFor="send-email"
+ className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+ >
+ 접근 권한 안내 이메일 발송
+ </label>
+ </div>
+
<DialogFooter>
<Button
variant="outline"
@@ -796,6 +970,7 @@ export default function ProjectMembersPage({
setUserSearchTerm('');
setNewMemberRole('viewer');
setIsExternalUser(false);
+ setSendEmailOnAdd(true);
}}
>
취소
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 05:32:57 +0000